/* eslint-disable react/no-unstable-nested-components */
import {
  Text,
  View,
  RefreshControl,
  StatusBar,
  StyleSheet,
  ScrollView,
  SectionList,
  Dimensions,
  FlatList,
} from 'react-native';
import React, {useState} from 'react';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

export default function Test() {
  const [refresh, setRefresh] = useState(false);
  const [current, setCurrent] = useState('');

  const DATA = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: '2 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d213',
      title: '4 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d11',
      title: '5 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d44',
      title: '6 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d55',
      title: '7 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d66',
      title: '8 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d62',
      title: '9 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d61',
      title: '10 Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d64',
      title: '11 Item',
    },
  ];
  const onRefresh = () => {
    setRefresh(true);

    setTimeout(() => {
      setRefresh(false);
    }, 2000);
  };

  const Item = ({title, id}) => (
    <View
      style={[
        styles.item,
        // eslint-disable-next-line react-native/no-inline-styles
        {backgroundColor: current === id ? 'red' : '#f9c2ff'},
      ]}>
      <Text
        style={styles.title}
        onPress={() => {
          setCurrent(id);
        }}>
        {title}
      </Text>
    </View>
  );

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <StatusBar backgroundColor="#ff8888" barStyle="default" />
        <FlatList
          data={DATA}
          // initialScrollIndex={1}
          // onScrollToIndexFailed={() => {}}
          numColumns={2}
          renderItem={({item}) => <Item title={item.title} id={item.id} />}
          keyExtractor={item => item.id}
          extraData={current}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box: {
    height: 200,
    backgroundColor: '#ff8888',
    alignItems: 'center',
  },
  center: {
    width: Dimensions.get('window').width,
  },
  top: {
    height: 50,
    textAlign: 'center',
    fontSize: 30,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});
